<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> 
<!DOCTYPE html>
<html>
	<head>
		<%-- jsp文件头和头部 --%>
		<%@ include file="../common/top.jsp"%>
		
		<script type="text/javascript" src="<%=basePath%>/resources/zTree/jquery.ztree.all.min.js"></script>
	
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/resources/zTree/zTreeStyle/zTreeStyle.css">
		
		<style type="text/css">
			ul.ztree {
				margin-top: 10px;
				border: 1px solid #617775;
				height:300px;
				overflow-y:scroll;
				overflow-x:auto;
			}
		</style>
		
		<script type="text/javascript">
			var roleTree, userRoleTree, userRoleGroupTree, groupTree, addOrEdit;
		
			$(function(){
				$(window).resize(function(){
					var fullScreen = getFullScreen("grid");
					$("#grid").datagrid('resize',{height:fullScreen});
				});
				
				$(window).trigger('resize');
			});
		
		
			function formatIsLocked(value,row,index){
				if(value == false){
					return "否";
				}else{
					return "已锁定";
				}
			}
			
			<shiro:hasPermission name="AddUser">
			function showAddUser(){
				$('#addDlg').dialog('open');
				$('#addForm').form('reset');
			}
			</shiro:hasPermission>
			
			<shiro:hasPermission name="EditUser">
			function showEditUser(){
				var row = $('#grid').datagrid('getSelected');
				if (row){
					$('#editDlg').dialog('open');
					$('#editForm').form('load',row);
				}else{
					$.messager.alert("提示","请选择需要编辑的用户");
				}
			}
			</shiro:hasPermission>
			
			<shiro:hasPermission name="AllotRole">
			function showUserRole(){
				var row = $('#grid').datagrid('getSelected');
				if (row){
					$('#roleDlg').dialog('open');
					
					$("#role_userId").val(row.userId);
					
					getUserRole(row.userId);
				}else{
					$.messager.alert("提示","请选择需要分配角色的用户");
				}
			}
			</shiro:hasPermission>
			
			function doSearch(){
				$("#grid").datagrid('load',$("#searchForm").serializeObject());
			}
			
			<shiro:hasPermission name="AddUser">
			function doAddUser(){
				$('#addForm').form('submit',{
					onSubmit: function(){
						return $(this).form('validate');
					},
					success: function(result){
						var result = eval('('+result+')');
						if (result.errorMsg){
							$.messager.alert('Error',result.errorMsg);
						} else {
							$('#addDlg').dialog('close');
							$('#grid').datagrid('reload');
						}
					}
				});
			}
			</shiro:hasPermission>
			
			<shiro:hasPermission name="EditUser">
			function doEditUser(){
				$('#editForm').form('submit',{
					onSubmit: function(){
						return $(this).form('validate');
					},
					success: function(result){
						var result = eval('('+result+')');
						if (result.errorMsg){
							$.messager.alert('Error',result.errorMsg);
						} else {
							$('#editDlg').dialog('close');
							$('#grid').datagrid('reload');
						}
					}
				});
			}
			</shiro:hasPermission>
			
			<shiro:hasPermission name="DelUser">
			function doDelUser(){
				var row = $('#grid').datagrid('getSelected');
				if (row){
					$.messager.confirm('确认','确定删除该用户?',function(r){
						if (r){
							$.ajax({
								url:'<%=basePath%>/user/delUser',
								data:{userId:row.userId},
								type:'post',
								dataType:'json',
								success:function(result){
									if (result.errorMsg){
										$.messager.alert('Error',result.errorMsg);
									} else {
										$('#grid').datagrid('reload');
									}
								}
							});
						}
					});
				}else{
					$.messager.alert("提示","请选择需要删除的用户");
				}
			}
			</shiro:hasPermission>
			
			<shiro:hasPermission name="AllotRole">
			function doUpdateUserRoles(){
				var nodes = userRoleTree.getNodes();
				
				var roleIds = new Array();
				
				for(var i=0,len=nodes.length; i<len; i++){
					roleIds.push(nodes[i].roleId);
				}
				
				var userId = $('#role_userId').val();
				
				$.ajax({
					url:'<%=basePath%>/user/updateUserRoles',
					data:{userId:userId,roleIds:roleIds},
					type:'post',
					dataType:'json',
					success:function(result){
						if (result.errorMsg){
							$.messager.alert('Error',result.errorMsg);
						} else {
							$('#roleDlg').dialog('close');
						}
					}
				});
			}
			</shiro:hasPermission>
			
			<shiro:hasPermission name="AllotRole">
			function getUserRole(userId){
				var groupSetting = {
						data: {
							key: {
								name: "groupName"
							},
							simpleData: {
								enable: true,
								idKey: "groupId",
								pIdKey: "groupPid",
								rootPId: 1
							}
						},
						view: {
							selectedMulti: false
						},
						callback: {
							onClick: getGroupRole
						}
					};
				
				var roleSetting = {
					data: {
						key: {
							name: "roleName"
						},
						simpleData: {
							enable: true,
							idKey: "roleId"
						}
					},
					edit: {
						enable: false
					},
					view: {
						showLine: false
					}
				};
				
				$.ajax({
					url:'<%=basePath%>/user/getAllotRoleGroupsAndUserRole',
					data:{userId:userId},
					type:'post',
					dataType:'json',
					success:function(result){
						if (result.errorMsg){
							$.messager.alert('Error',result.errorMsg);
						} else {
							var groups = result.groups;
							var userRoles = result.userRoles;
							
							userRoleGroupTree = $.fn.zTree.init($("#userRoleGroupTree"), groupSetting, groups);
							userRoleTree = $.fn.zTree.init($("#userRoleTree"), roleSetting, userRoles);

							userRoleGroupTree.expandAll(true);
							
							var groupNodes = userRoleGroupTree.getNodes();
							if (groupNodes.length>0) {
								userRoleGroupTree.selectNode(groupNodes[0]);
								getGroupRole(null, userRoleGroupTree, groupNodes[0]);
							}
						}
					}
				});
			}
			
			function getGroupRole(event, treeId, treeNode){
				var roleSetting = {
						data: {
							key: {
								name: "roleName"
							},
							simpleData: {
								enable: true,
								idKey: "roleId"
							}
						},
						edit: {
							enable: false
						},
						view: {
							showLine: false
						}
					};
				
				$.ajax({
					url:'<%=basePath%>/role/getGroupRoles',
					data:{groupId:treeNode.groupId},
					type:'post',
					dataType:'json',
					success:function(result){
						if (result.errorMsg){
							$.messager.alert('Error',result.errorMsg);
						} else {
							var roles = new Array();
							var userRoleNodes = userRoleTree.getNodes();
							
							$.each(result, function(i, role){
								var temp = true;
								
								$.each(userRoleNodes, function(j, userRoleNode){
									if(role.roleId == userRoleNode.roleId){
										temp = false;
										return false;
									}
								})
								
								if(temp){
									roles.push(role);
								}
							})
							
							roleTree = $.fn.zTree.init($("#roleTree"), roleSetting, roles);
						}
					}
				});
			}
			
			function toRight(){
				var nodes = roleTree.getSelectedNodes();
				userRoleTree.addNodes(null, nodes);
				
				$.each( nodes, function(i, node){
					roleTree.removeNode(node);
				});
			}
			
			function toLeft(){
				var groupId = userRoleGroupTree.getSelectedNodes()[0].groupId;
				
				var nodes = userRoleTree.getSelectedNodes();
				$.each( nodes, function(i, node){
					if(groupId == node.groupId){
						roleTree.addNodes(null, node);
					}
				});
				
				$.each( nodes, function(i, node){
					userRoleTree.removeNode(node);
				});
			}
			</shiro:hasPermission>
			
			function showGroupTree(state){
				addOrEdit = state;
				
				$('#groupDlg').dialog('open');
				
				initGroupTree();
			}
			
			function initGroupTree(){
				if(!groupTree){
					var setting = {
						data: {
							key: {
								name: "groupName"
							},
							simpleData: {
								enable: true,
								idKey: "groupId",
								pIdKey: "groupPid",
								rootPId: 1
							}
						},
						view: {
							selectedMulti: false
						}
					};
					
					$.ajax({
						url:'<%=basePath%>/group/getGroups',
						type:'post',
						dataType:'json',
						success:function(result){
							if (result.errorMsg){
								$.messager.alert('Error',result.errorMsg);
							} else {
								groupTree = $.fn.zTree.init($("#groupTree"), setting, result);
								
								groupTree.expandAll(true);
							}
						}
					});
				}
			}
			
			function selectedGroup(){
				var nodes = groupTree.getSelectedNodes();
				if(nodes.length == 0){
					$.messager.alert("提示","请选择一个所属组织");
					return;
				}
				
				var node = nodes[0];
				if(addOrEdit == 'add'){
					$('#add_groupId').val(node.groupId);
					$('#add_groupName').val(node.groupName);
				}else{
					$('#edit_groupId').val(node.groupId);
					$('#edit_groupName').val(node.groupName);
				}
				
				groupTree.cancelSelectedNode();
				
				$('#groupDlg').dialog('close');
			}
		</script>
		
	</head>
	
	<body>
		<div id="searchDiv" class="easyui-panel" style="width:100%;padding:10px;margin-bottom: 10px;">
			<form id="searchForm">
				<label for="userName">账号:</label>
				<input class="easyui-validatebox" type="text" id="userName" name="userName" />
				
				<label for="isLocked">是否锁定:</label>
				<select class="easyui-combobox" id="isLocked" name="isLocked" editable="false">
				    <option>全部</option>
				    <option value="0">否</option>
				    <option value="1">是</option>
				</select>
				
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearch()">搜索</a>
			</form>
		</div>
		
		<div id="tb">
			<shiro:hasPermission name="AddUser">
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="showAddUser()">新增用户</a>
			</shiro:hasPermission>
			<shiro:hasPermission name="EditUser">
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="showEditUser()">编辑用户</a>
			</shiro:hasPermission>
			<shiro:hasPermission name="DelUser">
				<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="doDelUser()">删除用户</a>
			</shiro:hasPermission>
			<shiro:hasPermission name="AllotRole">
				<a href="#" class="easyui-linkbutton" iconCls="icon-filter" plain="true" onclick="showUserRole()">分配用户角色</a>
			</shiro:hasPermission>
		</div>
		
		<table id="grid" class="easyui-datagrid" style="width:100%;"
			data-options="url:'<%=basePath%>/user/getUsers',pagination:true,fitColumns:true,singleSelect:true,toolbar:'#tb'">
			<thead>
				<tr>
					<th data-options="field:'userName',width:100">账号</th>
					<th data-options="field:'isLocked',width:100,formatter:formatIsLocked">是否锁定</th>
					<th data-options="field:'groupName',width:100">所属组织</th>
					<th data-options="field:'remark',width:100">备注</th>
				</tr>
			</thead>
		</table>
		
		<%-- 新增 --%>
		<shiro:hasPermission name="AddUser">
			<div id="addDlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
				closed="true" buttons="#addDlgBtns" title="新增用户" modal="true" resizable="true">
				<div class="ftitle">用户信息</div>
				<form id="addForm" method="post" data-options="url:'<%=basePath%>/user/addUser'">
					<div class="fitem">
						<label>账号:</label>
						<input name="userName" class="easyui-validatebox" required="true" validType="remote['<%=basePath%>/user/checkUserNameExist','userName']" invalidMessage="该用户名已存在">
					</div>
					<div class="fitem">
						<label>密码:</label>
						<input type="password" name="userPassword" class="easyui-validatebox" required="true">
					</div>
					<div class="fitem">
						<label>所属组织:</label>
						<input id="add_groupName" name="groupName" class="easyui-validatebox" required="true" onclick="showGroupTree('add')" readonly="readonly">
						<input id="add_groupId" name="groupId" type="hidden" >
					</div>
					<div class="fitem">
						<label>是否锁定:</label>
						<select class="easyui-combobox" name="isLocked" style="width:60px" editable="false">
						    <option value="0" selected="selected">否</option>
						    <option value="1">是</option>
						</select>
					</div>
					<div class="fitem">
						<label>备注:</label>
						<input name="remark" class="easyui-validatebox">
					</div>
				</form>
			</div>
			<div id="addDlgBtns">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="doAddUser()">保存</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addDlg').dialog('close')">取消</a>
			</div>
		</shiro:hasPermission>
		
		<%-- 编辑 --%>
		<shiro:hasPermission name="EditUser">
			<div id="editDlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
				closed="true" buttons="#editDlgBtns" title="编辑用户" modal="true" resizable="true">
				<div class="ftitle">用户信息</div>
				<form id="editForm" method="post" data-options="url:'<%=basePath%>/user/editUser'">
					<div class="fitem">
						<label>账号:</label>
						<input name="userName" class="easyui-validatebox" readonly="readonly">
					</div>
					<div class="fitem">
						<label>密码:</label>
						<input type="password" name="userPassword" class="easyui-validatebox" placeholder="无需修改密码请置空">
					</div>
					<div class="fitem">
						<label>所属组织:</label>
						<input id="edit_groupName" name="groupName" class="easyui-validatebox" required="true" onclick="showGroupTree('edit')" readonly="readonly">
						<input id="edit_groupId" name="groupId" type="hidden" >
					</div>
					<div class="fitem">
						<label>是否锁定:</label>
						<select class="easyui-combobox" name="isLocked" style="width:60px" editable="false">
						    <option value="0">否</option>
						    <option value="1">是</option>
						</select>
					</div>
					<div class="fitem">
						<label>备注:</label>
						<input name="remark" class="easyui-validatebox">
					</div>
					<input name="userId" type="hidden">
				</form>
			</div>
			<div id="editDlgBtns">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="doEditUser()">保存</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#editDlg').dialog('close')">取消</a>
			</div>
		</shiro:hasPermission>
		
		<%-- 分配用户角色 --%>
		<shiro:hasPermission name="AllotRole">
			<div id="roleDlg" class="easyui-dialog" style="width:600px;height:500px;padding:10px 20px"
				closed="true" buttons="#roleDlgBtns" title="分配用户角色" modal="true" resizable="true">
				<input id="role_userId" name="userId" type="hidden" >
				<table style="width: 98%;">
					<tr>
						<td width="150px">
							<div class="easyui-panel" title="组织" style="width:100%;height:380px;padding:10px;">
							    <ul id="userRoleGroupTree" class="ztree"></ul>
							</div>
						</td>
						<td>
							<div class="easyui-panel" style="width:98%;height:380px;padding:10px;">
								<table>
									<tr>
										<td width="150px">
											<div >
												<div style="margin-bottom: 18px;">未分配角色</div>
												<ul id="roleTree" class="ztree"></ul>
											</div>
										</td>
										<td align="center">
											<div style="width: 70px;">
												<div style="padding: 10px;">
													<input type="button" onclick="toRight()" value="&gt;" style="padding: 0px 10px;">
												</div>
												<div style="padding: 10px;">
													<input type="button" onclick="toLeft()" value="&lt;" style="padding: 0px 10px;">
												</div>
											</div>
										</td>
										<td width="150px">
											<div>
												<div style="margin-bottom: 18px;">已分配角色</div>
												<ul id="userRoleTree" class="ztree"></ul>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div id="roleDlgBtns">
				<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="doUpdateUserRoles()">保存</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#roleDlg').dialog('close')">取消</a>
			</div>
		</shiro:hasPermission>
		
		<%-- 组织树 --%>
		<div id="groupDlg" class="easyui-dialog" style="width:350px;height:500px;padding:10px 20px"
			closed="true" buttons="#groupDlgBtns" title="所属组织" modal="true" resizable="true">
			<ul id="groupTree" class="ztree"></ul>
		</div>
		<div id="groupDlgBtns">
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="selectedGroup()">选择并返回</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#groupDlg').dialog('close')">取消</a>
		</div>
	</body>
</html>